<template>
	<view class="pub-component date-component" v-if="currDateModal">
		<view class="pub-modal">
			<view class="header">
				<text>请选择时间</text>
				<text class="iconfont icon-close" @click="handleClickClose"></text>
			</view>
			<view class="body">
				<view class="date-list" v-for="item in yearArr" :key="item.id">
					<view class="year">{{item.year}}年</view>
					<view class="month">
						<text :class="[el.flag ? 'active': '']" v-for="el in item.monthArr" :key="el.id" @click="handleClickSelectedType(item, el)">{{el.month}}月</text>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import {defineComponent, reactive, toRefs, watch} from 'vue'
	export default defineComponent({
		props: {
			dateShowModal: {
				type: Boolean,
				default: false
			}
		},
		setup(props, context) {
			const state = reactive({
				currDateModal: false,
				yearArr: [
					{
						id: '1', 
						year: '2022',
						monthArr: [
							{id: '1234', month: '1', flag: false}
						],
					},
					{
						id: '2', 
						year: '2021',
						monthArr: [
							{id: '1', month: '1', flag: false},
							{id: '2', month: '2', flag: false},
							{id: '3', month: '3', flag: false},
							{id: '4', month: '4', flag: false},
							{id: '5', month: '5', flag: false},
							{id: '6', month: '6', flag: false},
							{id: '7', month: '7', flag: false},
							{id: '8', month: '8', flag: false},
							{id: '9', month: '9', flag: false},
							{id: '10', month: '10', flag: false},
							{id: '11', month: '11', flag: false},
							{id: '12', month: '12', flag: false},
						]
					}
				]
			})
			
			// 监听时间弹窗
			watch(()=>props.dateShowModal, (newVal) => {
				state.currDateModal = newVal
			})
			
			// 关闭弹窗
			const handleClickClose = () => {
				context.emit('closeDate')
			}
			// 选中类型
			const handleClickSelectedType = (obj, el) => {
				state.yearArr.forEach(item => {
					const children = item.monthArr
					children.forEach(v => {
						if(el.id == v.id) {
							v.flag = true
						} else {
							v.flag = false
						}
					})
				})
				console.log(obj, el)
				const params = {year: obj.year, month: el.month}
				context.emit('selectedDate', params)
			}
			
			return {
				...toRefs(state),
				handleClickClose,
				handleClickSelectedType
			}
		}
	})
</script>

<style scoped>
	.pub-component{
		position: fixed;
		top: 0px;
		left: 0px;
		display: flex;
		align-items: flex-end;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.2);
	}
	.pub-modal{
		width: 100%;
		height: 60%;
		background: #fff;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		transition: 1s linear;
	}
	.pub-modal .header{
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10px;
	}
	.pub-modal .header text:nth-child(1) {
		font-size: 14px;
	}
	.pub-modal .header text:nth-child(2) {
		position: absolute;
		right: 10px;
		top: 10px;
		font-size: 19px;
	}
	.body{
		display: flex;
		flex-direction: column;
		padding: 10px;
		background: #eee;
	}
	.body .date-list .year{
		text-align: center;
		margin-bottom: 10px;
	}
	.body .date-list .month{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	.body .date-list .month text{
		width: calc(25% - 12px);
		padding: 5px 0px;
		background: #fff;
		margin-right: 16px;
		margin-bottom: 14px;
		text-align: center;
	}
	.body .date-list .month text:nth-child(4n) {
		margin-right: 0px;
	}
	.body .date-list .month text.active{
		background: #038F42;
		color: #fff;
	}
</style>
